<!--
 * @description 培训班列表组件
 * @date 2022/11/12
 -->
<template>
  <div
    class="train-list-comp"
    :style="{
      'margin-top': top,
      'padding-left': margins,
      'padding-right': margins,
    }"
  >
    <!-- <empty v-if="list.length == 0 || isNoData" class="empty-box" /> -->
    <p v-if="list.length == 0 || isNoData" class="train-nodata">暂无培训班</p>
    <van-pull-refresh id="rushIndex" v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="finishedText"
        :immediate-check="false"
        :offset="20"
        @load="onLoad"
      >
        <ul>
          <li v-for="(item, index) in list" :key="index" class="item-box">
            <section class="list-item">
              <!-- <img class="one" :src="item.coverImgIdURL" alt=""> -->
              <van-image
                class="one"
                :src="setImgPath(item.coverImgId, item.coverImgIdURL)"
                :fit="imgType"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>
                  <img src="../../images/base/error-icon.png" alt="">
                </template>
              </van-image>
              <p class="two">{{ item.name }}</p>
              <p v-if="item.organizer" class="twos">主办单位: {{ item.organizer }}</p>
              <p class="three">{{ item.startTime.slice(0, 11) }}至{{ item.endTime.slice(0, 11) }}</p>
              <template v-if="labelObj!==undefined">
                <label-comp v-if="labelObj!==undefined" :label-list="item.labelList" />
              </template>
              <template v-else>
                <img
                  v-if="item.areaStatus == '1'"
                  class="four"
                  src="./images/a.png"
                  alt=""
                >
                <img
                  v-if="item.areaStatus == '2'"
                  class="four"
                  src="./images/b.png"
                  alt=""
                >
                <img
                  v-if="item.areaStatus == '0'"
                  class="four"
                  src="./images/c.png"
                  alt=""
                >
              </template>
            </section>
          </li>
          <!-- <li v-show="list && list.length" class="list-more">查看更多</li> -->
        </ul>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// import empty from '../../../empty'
import mixins from '@/components/CustomPage/apps/widget/mixins'
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'

export default {
  name: 'TrainListComp',
  components: {LabelComp},
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: () => {
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      active: '',
      isNoData: false,
      defaultList: [
        {
          coverImgIdURL: '',
          name: '培训班',
          organizer: 'xxx主办单位',
          startTime: '2022-06-16',
          endTime: '2022-06-16',
          areaStatus: '1'
        },
        {
          coverImgIdURL: '',
          name: '培训班',
          organizer: 'xxx主办单位',
          startTime: '2022-06-16',
          endTime: '2022-06-16',
          areaStatus: '2'
        },
        {
          coverImgIdURL: '',
          name: '培训班',
          organizer: 'xxx主办单位',
          startTime: '2022-06-16',
          endTime: '2022-06-16',
          areaStatus: '0'
        }
      ],
      id: '',
      newsType: '',
      newsName: '',
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      labelObj: undefined
    }
  },
  async created() {
    if (this.isInitData) {
      this.labelObj = await this.getLabelList()
      await this.initData()
    } else {
      this.list = this.defaultList
      this.finished = true
    }
  },
  methods: {
    setData(result) {
      const res = result.dataList
      const {data} = res
      this.list.push(...data.rows)
      if (this.list.length >= data.total) {
        this.finished = true
      } else {
        this.finished = false
      }
      if (this.labelObj !== undefined) {
        this.setLabel(this.list, 'list')
      }
    },
    /**
     * 加载数据
     */
    async seflLoadData() {
      await this.getDataByCode('dataList')
    },
    /**
     * 刷新
     */
    onRefresh() {
      return new Promise((sesolve, reject) => {
        this.finished = false
        this.page = 1
        this.list = []
        this.seflLoadData()
        reject()
      })
    },

    /**
     * 上拉加载
     */
    onLoad() {
      if (!this.isInitData) {
        this.finished = true
        this.loading = false
        return
      }
      this.page += 1
      this.seflLoadData()
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/utility/rem.scss";
@import "~@/styles/mixin.scss";

.train-list-comp {
  .empty-box {
    border: rem(1) solid red;
    margin-top: 40%;
  }

  .train-nodata {
    line-height: rem(200);
    color: #666;
    font-size: rem(28);
    text-align: center;
  }

  ul {
    background-color: #f8f8f8;
    width: 100%;
    padding: 0 rem(24);

    .item-box {
      padding-bottom: rem(20);
      position: relative;

      .list-item {
        width: 100%;
        background: #ffffff;
        border-radius: rem(16);
        position: relative;
        overflow: hidden;

        .one {
          display: block;
          width: 100%;
          height: rem(310);
        }

        .two {
          // width: rem(660);
          font-size: rem(30);
          font-family: PingFang SC, PingFang SC-Bold;
          font-weight: 700;
          text-align: left;
          color: #333333;
          margin-top: rem(22);
          margin-left: rem(22);
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .twos {
          font-size: rem(26);
          font-family: PingFang SC, PingFang SC-Bold;
          text-align: left;
          color: #333333;
          margin-top: rem(22);
          margin-left: rem(22);
        }

        .three {
          font-size: rem(24);
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          text-align: left;
          color: #666666;
          margin-left: rem(22);
          margin-top: rem(22);
          margin-bottom: rem(30);
        }

        .four {
          display: block;
          width: rem(100);
          height: rem(40);
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }

    .list-more {
      height: rem(70);
      line-height: rem(70);
      text-align: center;
      font-size: rem(24);
      color: #999;
    }
  }
}
</style>
